<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <link rel="stylesheet" href="css/survey.css">
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>
    <script type="text/javascript" src="js/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery-validation/messages_cn.js"></script>
    <script type="text/javascript" src="js/survey/survey.js"></script>

</head>
<body>
<!-- 控制整个页面的尺寸 -->
<div id="wrapper" >
    <form id="survey_form" method="post" action="survey">
    <div id="page">
        <!-- 问卷标题 -->
        <div id="title">
            <strong>${surveyInfo.title}</strong>
        </div>

        <!-- 问卷的内容 -->
        <div id="questions" class="{surveyId:'${surveyInfo.id}', title:'${surveyInfo.title}', pageIndex: '${pageIndex!1}'}">
            <ol>
                <#list results as result>
                <li class="question {questionId:'${result.question.id}', questionType:'${result.question.questionType}'} ">
                    <h4 class="title">${result.question.title}<span style="color:red;margin:0 10px;">*</span> <label for="option_${result.question.id}" generated="true" class="error red" style="color:red;"></label></h4>

                    <!-- 单选 -->
                    <#if result.question.questionType == "radio">
                        <table class="options radio">
                            <tbody>
                                <#list result.optionItemsList as optionItem>
                                <tr>
                                    <td><label><input type="radio" name="option_${result.question.id}" value="${optionItem.id}"  class="{required:true, messages:{required: '（必选！）'}}">${optionItem.itemText}</label></td>
                                </tr>
                                </#list>
                            </tbody>
                        </table>

                    <!-- 复选 -->
                    <#elseif result.question.questionType == "checkbox">
                        <table class="options radio">
                            <tbody>
                            <#list result.optionItemsList as optionItem>
                                <tr>
                                    <td><label><input type="checkbox" name="option_${result.question.id}" value="${optionItem.id}"  class="{required:true, messages:{required: '（必选！）'}}">${optionItem.itemText}</label></td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>

                    <!-- 单选矩阵 -->
                    <#elseif result.question.questionType == "radio_matrix">
                        <table class="matrix">
                            <tbody>
                            <tr>
                                <td>&nbsp;</td>
                                <#list result.optionItemsList as optionItem>
                                    <td>${optionItem.itemText}</td>
                                </#list>
                            </tr>
                            <#list result.matrixQuestionList as matrixQuestion>
                            <tr class="sub_question {questionId: '${matrixQuestion.id}', parentId: '${matrixQuestion.parentId}'}">
                                <td>${matrixQuestion.title}</td>
                                <#list result.optionItemsList as optionItem>
                                <td><input type="radio" name="option_${matrixQuestion.id}" value="${optionItem.id}" class="{required:true, messages:{required: '（必选！）'}}"></td>
                                </#list>
                                <td>
                                    <label for="option_${matrixQuestion.id}" generated="true" class="error red" style="color:red;"></label>
                                </td>
                            </tr>
                            </#list>
                            </tbody>
                        </table>

                    <!-- 复选矩阵 -->
                    <#elseif result.question.questionType == "checkbox_matrix">
                        <table class="matrix">
                            <tbody>
                            <tr>
                                <td>&nbsp;</td>
                                <#list result.optionItemsList as optionItem>
                                    <td>${optionItem.itemText}</td>
                                </#list>
                            </tr>
                            <#list result.matrixQuestionList as matrixQuestion>
                                <tr class="sub_question {questionId: '${matrixQuestion.id}', parentId: '${matrixQuestion.parentId}'}">
                                    <td>${matrixQuestion.title}</td>
                                    <#list result.optionItemsList as optionItem>
                                        <td><input type="checkbox"  name="option_${matrixQuestion.id}" value="${optionItem.id}" class="{required:true, messages:{required: '（必选！）'}}"></td>
                                    </#list>
                                    <td>
                                        <label for="option_${matrixQuestion.id}" generated="true" class="error red" style="color:red;"></label>
                                    </td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>

                    <!-- 下拉框 -->
                    <#elseif result.question.questionType == "select">
                        <select class="select {required:true, messages:{required: '（必选！）'}}"  name="option_${result.question.id}">
                        <#list result.optionItemsList as optionItem>
                            <option value="${optionItem.id}">${optionItem.itemText}</option>
                        </#list>
                        </select>

                    <!--多行输入-->
                    <#elseif result.question.questionType == "multi_input">
                        <textarea  name="option_${result.question.id}" cols="60" rows="10" class="multi_input {required:true, messages:{required: '（必填！）'}}"></textarea>
                    </#if>
                </li>
                </#list>

            </ol>
        </div>

        <!-- 问卷提交 -->
        <div id="foot_bar">
            <button  id="survey_submit" type="button">下一步</button>
        </div>
    </div>

    <input type="hidden" name="pageIndex" id="pageIndex" value="${pageIndex!1}">
    <input type="hidden" name="surveySN" id="surveySN"  value="${surveySN!''}">
    <input type="hidden" name="ptId" id="ptId" value="${ptId!''}" >
    <input type="hidden" name="sndaId" id="sndaId" value="${sndaId!''}" >

    </form>
</div>
</body>
</html>
